<template>
    <div>
      <!-- <h3 class="com_title">
        <span>热帖</span>
      </h3> -->
      <!-- <div class="hotTopic_t">
        <span class="topic0">标题</span>
        <span class="topic1">发贴人</span>
        <span class="topic2">回复数</span>
        <span class="topic3">人气</span>
      </div> -->
  
        <div class="hotTopic_c"  @click="btnClick(item)" v-for="(item,index) in forumList" :key="index">
          <div class="hotTop_t">
<!--            <em class="classify_dot">・</em>-->
            <a  class="topic_title" :title="item.forumTitle">标题：{{ item.forumTitle }}</a>
          
         
          <div class="root-sec">
             <span href="" class="questioner" rel="nofollow" :title="item.user.userName"
          style="font-size: 15px;"
          >发贴人：{{ item.user.userName }}</span>
          <span class="view">人气：{{ item.click }}</span>
          <span class="reply_num">回复数：{{ item.reply }}</span>
          
          </div>
        </div>
   
    </div>
  </div>
</template>

<script>
import { listForum,updateClickNumber } from '@/api/forum'
export default {
  name: 'home',
  data(){
    return{
      // 论坛表格数据
      forumList: [],
      forumListWeek: [],
      btnFlag: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        forumTitle: undefined,
        userId: undefined,
        accept: undefined,
        report: '0',
        status: '1',
        orderByColumn: "click",
        isAsc:'desc'
      },
      total: 0
    }
  },
  created() {
    
  },
  mounted() {
    this.getList()
  },
  methods: {
    /** 查询论坛列表 */
    getList() {
      listForum(this.queryParams).then(response => {
        this.forumList = response.rows
        // this.total = response.total
          this.forumList.map(item => {
          // item.img = this.change(item.img)
          item.url = this.getObjectKeys(item.forumContent)
        })
      })
      /*let queryParamsWeek={
        pageNum: 1,
        pageSize: 5,
        report: '0',
        status: '1'
      }
      listForum(this.addDateWeekRange(queryParamsWeek)).then(response => {
        this.forumListWeek = response.rows
      })*/
    },
    btnClick(data){
      updateClickNumber(data)
      console.log(data)
      this.$router.push({
        path: './forumdetail/main',
        query: {
          id: data.forumId
        }
      })
    }

  },
}
</script>

<style scoped>
.hotTopic_c {
  margin: 0px 4%;
  overflow: hidden;
   border: 1px solid #ddd;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei", sans-serif;
}

.hotTop_t {
  position: relative;
  top: -3 rpx;
  /* min-height: 100px; */
  margin: 10px;
}

.topic_title {
  font-size: 18px;
  line-height: 50 rpx;
  font-weight: 400;
  color: rgba(34, 34, 34, 1);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.root-sec {
  line-height: 17.656px;
  height: 17.656px;
}
/* .questioner{
  text-align: left;
} */
.reply_num{
  float:right;
  display: inline-block;
  vertical-align: top;
  font-size: 13.2px;
  font-weight: 400;
  color: #999;
  line-height: 17.656px;
  height: 17.656px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}
.view{
  float:right;
   display: inline-block;
  vertical-align: top;
  font-size: 13.2px;
  font-weight: 400;
  color: #999;
  line-height: 17.656px;
  height: 17.656px;
  margin-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
}

</style>
